{% extends '__base__.html' %}

{% block title %}编辑日志{% endblock %}

{% block beforehead %}

<script>

    var
    ID = '{{ id }}',
    action = '{{ action }}';

function initVM(student) {
    var vm = new Vue({
        el: '#vm',
        data: student,
        methods: {
            submit: function (event) {
                event.preventDefault();
                var $form = $('#vm').find('form');
                $form.postJSON(action, this.$data, function (err, r) {
                    if (err) {
                        $form.showFormError(err);
                    }
                    else {
                        return location.assign('/manage/students');
                    }
                });
            }
        }
    });
    $('#vm').show();
}

$(function () {
    if (ID) {
        getJSON('/api/students/' + ID, function (err, student) {
            if (err) {
                return fatal(err);
            }
            $('#loading').hide();
            initVM(student);
        });
    }
    else {
        $('#loading').hide();
        initVM({
            student_name: '',
            student_no: '',
            birth:( new Date().getFullYear()-20)+"-1-1"
        });
    }
});

</script>

{% endblock %}

{% block content %}
<link href="/static/css/components/form-select.min.css" rel="stylesheet" />
<link href="/static/css/components/datepicker.min.css" rel="stylesheet" />
<script src="/static/js/components/form-select.min.js"></script>
<script src="/static/js/components/datepicker.min.js"></script>
<div class="uk-width-1-1 uk-margin-bottom">
    <div class="uk-panel uk-panel-box">
        <ul class="uk-breadcrumb">
            <li><a href="/manage/comments">评论</a></li>
            <li><a href="/manage/students">日志</a></li>
            <li><a href="/manage/users">用户</a></li>
        </ul>
    </div>
</div>

<div id="error" class="uk-width-1-1">
</div>

<div id="loading" class="uk-width-1-1 uk-text-center">
    <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
</div>

<div id="vm" class="uk-width-2-3">
    <form v-on="submit: submit" class="uk-form uk-form-stacked">
        <div class="uk-alert uk-alert-danger uk-hidden"></div>
        <div class="uk-form-row">
            <label class="uk-form-label">学号:</label>
            <div class="uk-form-controls">
                <input v-model="student_no" name="student_no" type="text" placeholder="学号" class="uk-width-1-1" />
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label">姓名:</label>
            <div class="uk-form-controls">
                <input v-model="student_name" name="student_name" type="text" placeholder="姓名" class="uk-width-1-1" />
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label">生日:</label>
            <div class="uk-form-controls">
                <input v-model="birth" name="birth" placeholder="生日" class="uk-width-1-1" data-uk-datepicker="{format:'YYYY-MM-DD'}" />
            </div>
        </div>
        <div class="uk-form-row">
            <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-save"></i> 保存</button>
            <a href="/manage/students" class="uk-button"><i class="uk-icon-times"></i> 取消</a>
        </div>
    </form>
</div>

{% endblock %}